<template>
  <div class="archive container">
    <!-- 归档列表 -->
    <el-card class="archive-container">
      <div class="num">目前共计{{ count }}篇文章，继续加油
      </div>

      <div style="border-bottom: 1px solid var(--border-line);margin-bottom: 20px;"></div>
      <ul class="timeline-wrapper">
        <li class="timeline-item" v-for="(item, index) in archiveList" :key="index">
          <div class="timeline-box">
            <div class="out-circle">
              <div class="in-circle"></div>
            </div>
            <div class="long-line"></div>
          </div>
          <div class="timeline-content">
            <div class="timeline-date" @click="open(index)">
                            <span style="padding-left: 10px;">
                                {{ formatTime(item.time) }}

                            </span>
              <span style="float: right;padding-right: 10px;">
                                <i ref="iconRef" :class="icon"></i>
                            </span>
            </div>
            <div ref="liColRef" style="overflow: hidden;transition: height 0.3s;">
              <nuxt-link :to="'/article/' + chriden.id+'.html'" v-for="chriden in item.list" :key="chriden.id"
                         class="timeline-title">
                <span style="margin-right: 10px;">{{ chriden.formatTime }} : </span> {{ chriden.title }}
              </nuxt-link>

              <el-divider></el-divider>
            </div>
          </div>
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import { archive } from '@/api'
const count = ref(0);
const archiveList = ref<any>([]);
const icon = ref('el-icon-arrow-down');
const showIcon = ref(true)
const liColHeight = ref(0)
const liColRef = ref();
const iconRef = ref();
/*import { archive } from '@/api'
export default {

  created() {
    document.title = "文章归档";
    this.fetchArticleList();
  },
  data: function () {
    return {
      archiveList: [],
      count: 0,
      liColHeight: 0, // 折叠面板内容初始高度
    };
  },
  methods: {
    open(i) {
      const liCol = this.$refs.liCol[i];
      let height = liCol.offsetHeight; //获取要展开元素的高度
      if (height === this.liColHeight) {
        // 展开
        liCol.style.height = "auto";
        height = liCol.offsetHeight;
        liCol.style.height = this.liColHeight + "px";

        let f = document.body.offsetHeight; // 必加
        liCol.style.height = height + "px";
      } else {
        // 收缩
        liCol.style.height = this.liColHeight + "px";
      }
    },
    fetchArticleList() {
      archive().then(res => {
        this.archiveList = res.data
        this.count = res.extra.total
      });
    },

    handleClike(id) {
      this.$router.push({ path: "articleInfo", query: { articleId: id } })
    },

    formatTime(time) {
      const arr = time.split("-")
      return arr[0] + "  年  " + arr[1] + "  月"
    }
  },
};*/
const getArchiveList = ()=>{
  archive().then((res:any)=>{
    console.log(res)
    archiveList.value = res.data.value.data
    count.value = res.data.value.extra.total
  })
}
const open = (i:number)=>{
  const liCol = liColRef?.value[i];
  const iconDom = iconRef?.value[i];
  let height = liCol.offsetHeight; //获取要展开元素的高度
  if (height === liColHeight.value) {
    // 展开
    liCol.style.height = "auto";
    height = liCol.offsetHeight;
    liCol.style.height = liColHeight.value + "px";

    let f = document.body.offsetHeight; // 必加
    liCol.style.height = height + "px";
    iconDom.className = "el-icon-arrow-down"
  } else {
    // 收缩
    iconDom.className = "el-icon-arrow-up"
    liCol.style.height = liColHeight.value + "px";
  }
}
const formatTime = (time:string)=>{
  const arr = time.split("-")
  return arr[0] + "  年  " + arr[1] + "  月"
}
onMounted(()=>{
  getArchiveList();
})
</script>

<style lang="scss" scoped>
.archive {
  position: relative;


  @media screen and (max-width: 1118px) {
    padding-left: 10px;
    padding-right: 10px;

    .archive-container {
      margin-top: 70px;
      width: 100%;
    }
  }

  @media screen and (min-width: 1119px) {
    .archive-container {
      margin-top: 80px;
      width: 100%;
    }
  }

  .archive-container {
    height: 100%;
    text-align: center;
    background-color: var(--background-color);
    padding: 5px;

    .num {
      line-height: 50px;
      font-weight: 700;
      color: var(--theme-color);
    }

    ul.timeline-wrapper {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /* 时间线 */
    .timeline-item {
      position: relative;
      height: auto;

      .timeline-box {
        text-align: center;
        position: absolute;
        height: 100%;

        .out-circle {
          width: 16px;
          height: 16px;
          background: rgba(14, 116, 218, 0.1);
          box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
          border-radius: 50%;
          display: flex;
          align-items: center;
          position: relative;
          top: 7px;

          .in-circle {
            width: 10px;
            height: 10px;
            margin: 0 auto;
            background: var(--theme-color);
            border-radius: 50%;
            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
          }
        }

        .long-line {
          width: 5px;
          height: 100%;
          background: var(--theme-color);
          box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
          opacity: 0.1;
          margin-left: 5px;
        }
      }

      .timeline-content {
        box-sizing: border-box;
        margin-left: 20px;
        height: auto;
        padding: 0 0 0 20px;
        text-align: left;

        .timeline-title {
          font-size: 14px;
          word-break: break-all;
          margin-bottom: 16px;
          color: var(--article-color);
          font-weight: 500;
          cursor: url(https://img.shiyit.com/link.cur), pointer;
          margin-left: 20px;
          display: block;
          text-decoration: none;

          &:hover {
            color: var(--theme-color);
          }
        }

        .timeline-date {
          font-size: 14px;
          color: var(--theme-color);
          font-weight: 500;
          margin-bottom: 16px;
          background-color: var(--archives-backgroud-color);
          display: block;
          height: 35px;
          line-height: 35px;
          border-radius: 5px;
          cursor: url(https://img.shiyit.com/link.cur), pointer;

          &::before {
            content: "";
            width: 0;
            height: 0;
            border-width: 10px 10px 10px 0;
            border-style: solid;
            border-color: transparent var(--archives-backgroud-color) transparent transparent;
            /*透明 灰 透明 透明 */
            position: relative;
            display: inline-block;
            left: -8px;
            top: 5px;
          }
        }

        .fgx {
          width: 100%;
          border-bottom: 2px dashed var(--border-line);
          margin-bottom: 20px;
        }
      }

    }

    .timeline-item:last-of-type .timeline-content {
      margin-bottom: 0;
    }
  }
}
</style>
